<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-03-22 12:12:49
 * @LastEditTime: 2023-05-19 15:51:51
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\Layouts\Admin\components\AppMain.vue
 * Copyright 版权声明
-->
<template>
  <section class="app-main">
    <!-- 当前系统内路由-加载系统内组件 -->
    <template v-if="iframeHref === ''">
      <!-- <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view :key="key"></router-view>
        </keep-alive>
      </transition> -->
      <!-- {{ cachedViews }} -->
      <router-view v-slot="{ Component }">
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="key"/>
        </keep-alive>
      </router-view>
    </template>
    <!-- 三方系统通过iframe加载 -->
    <template v-else>
      <iframe class="main-iframe" v-bind:src="iframeHref" frameborder="0"></iframe>
    </template>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    // 监听如果是通过系统路由跳转
    key() {
      return this.$route.fullPath
    },
    ...mapGetters([
      'iframeHref'
    ])
  }
}
</script>

<style scoped>
.app-main {
  /*84 = navbar + tags-view = 50 +34 */
  min-height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
  background-color: #F5F5F5;
  padding: 20px;
}
.main-iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

